<template>
   <footer class="footer">
      <span class="todo-count"  v-show="residuestyle"><strong>{{residue}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected :type === 'all' }" @click="alter('all')" href="#/">全部</a>
        </li>
        <li>
          <a :class="{selected :type === 'active' }" @click="alter('active')" href="#/active">进行中</a>
        </li>
        <li>
          <a :class="{selected :type === 'completed' }" @click="alter('completed')" href="#/completed">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="delresidue" v-show="succeed">清除已完成</button>
    </footer>
</template>

<script>
export default {
  name: 'MyFoot',
  props: {
    list :{
      type:Array,
      required : true,
    },
    type:{
      type:String,
      required : true,
    }
  },
  methods:{
    delresidue(){
      this.$emit('delresidue')
    },
    alter(type){
      this.$emit('alter' , type)
    }
  },
  computed :{
    residue(){
    return  this.list.filter(item =>!item.isDone).length
    },
    residuestyle(){
      return this.list.find(item => !item.isDone)
    },
    succeed(){
      return this.list.find(item => item.isDone)
    }
  }
 }
</script>

<style scoped lang="less"></style>
